<template>
  <div id="gs-scroll-wrapper" class="gs-scroll-wrapper">
    <div class="scroll-content">
      <slot></slot>
      <slot name="pullUp">
        <div class="pullUp-wrapper" v-if="pullUpLoad">
          <h5 class="pullUp-text">{{pullUpText}}</h5>
        </div>
      </slot>
    </div>
    <slot name="pullDown">
      <div class="pullDown-wrapper" v-if="pullDownRefresh">
        <h5 class="pullDown-text">{{pullDownText}}</h5>
      </div>
    </slot>
  </div>
</template>

<script>
import GScroll from 'src'

export default {
  name: 'GsScroll',
  mounted () {
    this.scroll = new GScroll('gs-scroll-wrapper', {
      scrollX: false,
      scrollY: true,
      pullDownRefresh: this.pullDownRefresh,
      pullUpLoad: this.pullUpLoad
    })
    this.scroll.on('scroll', pos => {
      if (this.pullingDown) return
      this.$emit('pullDownScroll', pos)
    })
    this.scroll.on('pullingDown', () => {
      if (this.pullingDown) {
        return
      }
      console.log('pull down refresh data')
      this.pullingDown = true
      this.$emit('pullingDown')
    })
    this.scroll.on('pullingUp', () => {
      if (this.pullingUp) {
        this.$nextTick(() => {
          this.pullingUp = false
          this.forceUpdate('up')
        })
        return
      }
      this.pullingUp = true
      console.log('pull up load data')
      this.$emit('pullingUp')
    })
  },
  data () {
    return {}
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    pullDownRefresh: {
      type: null,
      default: false
    },
    pullUpLoad: {
      type: null,
      default: false
    }
  },
  computed: {
    pullDownText () {
      return this.pullDownRefresh && this.pullDownRefresh.text
    },
    pullUpText () {
      return this.pullUpLoad && this.pullUpLoad.text
    }
  },
  watch: {
    pullDownRefresh: {
      handler () {
        this.scroll.options.pullDownRefresh = this.pullDownRefresh
        this.scroll.refresh()
      },
      deep: true
    },
    pullUpLoad: {
      handler () {
        this.scroll.options.pullUpLoad = this.pullUpLoad
        this.scroll.refresh()
      },
      deep: true
    }
  },
  methods: {
    refresh () {
      this.scroll.refresh()
    },
    forceUpdate (type) {
      if (type === 'down') {
        this.scroll.finishPullDown()
        this.scroll.refresh()
        this.pullingDown = false
      }
      if (type === 'up') {
        this.scroll.refresh()
        this.scroll.finishPullUp()
      }
    },
    scrollTo (x, y, time, easing) {
      this.scroll.scrollTo(x, y, time, easing)
    }
  }
}
</script>

<style lang="scss">
.gs-scroll-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  .pullDown-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    .pullDown-text {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
    }
  }
  .pullUp-wrapper {
    width: 100%;
    padding: 5px 0 15px;
    .pullUp-text {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
.scroll-content {
  position: relative;
  background: transparent;
  z-index: 1;
  .scroll-list {
    background: white;
    .item {
      padding: 20px 15px;
      color: grey;
      border-bottom: 1px solid grey;
      user-select: none;
    }
  }
}
</style>
